<template>
  <Form :model="formState" v-bind="formItemLayout" ref="formRef" name="BasicForm">
    <FormItem name="eventType" label="事件类型" :rules="[{ required: true, message: '请选择事件类型' }]">
      <RadioGroup v-model:value="formState['eventType']">
        <RadioButton value="EVENT.SYS">系统事件</RadioButton>
        <RadioButton value="EVENT.CUSTOM">自定义事件</RadioButton>
      </RadioGroup>
    </FormItem>

    <div v-if="system === true">
      <FormItem name="resourceType" label="事件来源">
        <Select v-model:value="formState.resourceType">
          <SelectOption v-for="option in resourceOptionList" v-bind:key="option.value" :value="option.value"
            >{{ option.description }}
          </SelectOption>
        </Select>
      </FormItem>

      <FormItem name="monitoringScope" label="监控范围" :rules="[{ required: true, message: '请选择监控范围' }]">
        <RadioGroup v-model:value="formState['monitoringScope']">
          <RadioButton value="ALL_INSTANCE">全部资源</RadioButton>
          <RadioButton value="MULTI_INSTANCE">指定资源</RadioButton>
        </RadioGroup>
      </FormItem>

      <FormItem v-if="multiple" name="dimension" label="维度">
        <Select v-model:value="formState.dimension">
          <SelectOption v-for="option in dimensionOptionList" v-bind:key="option.value" :value="option.value"
            >{{ option.description }}
          </SelectOption>
        </Select>
      </FormItem>

      <FormItem v-if="multiple" name="resources" label="资源列表" :rules="[{ required: true, message: '请选择资源' }]">
        <Select v-model:value="formState.resources" mode="multiple">
          <SelectOption v-for="option in resourceListOptionList" v-bind:key="option.value" :value="option.value">
            {{ option.description }}
          </SelectOption>
        </Select>
      </FormItem>
    </div>

    <div v-if="system === false">
      <FormItem name="resourceType" label="事件来源">
        <Input v-model:value="formState.resourceType"> </Input>
      </FormItem>
    </div>
    <div v-show="flag === true">
      <FormItem name="policies" label="告警策略">
        <EventCustomTable
          ref="tableRef"
          :eventType="formState.eventType"
          :resourceType="formState.resourceType"
          v-model:value="formState.policies"
        ></EventCustomTable>
      </FormItem>
    </div>
  </Form>
</template>

<script lang="ts" setup>
import { Form, FormItem, Input, RadioGroup, RadioButton, Select, SelectOption } from 'ant-design-vue';
import { nextTick, onMounted, ref, toRaw, watch } from 'vue';
import { getDimension, getNamespace, getResourceList } from '/@/api/maintenance-center/alarm/alarm';
import EventCustomTable from '/@/views/maintenance-center/alarm-rule/new-ces-rule/components/EventCustomTable.vue';

const emit = defineEmits(['submit']);

const formItemLayout = {
  labelCol: { span: 4 },
  labelWidth: 200,
  wrapperCol: { span: 16 },
};

const system = ref(true);
const tableRef = ref();
const multiple = ref(false);
const isEdit = ref(false);
const resourceOptionList = ref([]);
const dimensionOptionList = ref([]);
const resourceListOptionList = ref([]);
const flag = ref(false);
const formState = ref<Record<string, any>>({});
const formRef = ref();

watch(
  () => formState.value.eventType,
  async () => {
    if (formState.value.eventType && formState.value.eventType === 'EVENT.SYS') {
      system.value = true;
      flag.value = false;
      if (isEdit.value === false) {
        formState.value.resourceType = undefined;
        formState.value.monitoringScope = undefined;
      }
      resourceOptionList.value = await getNamespace();
    } else {
      system.value = false;
      if (isEdit.value === false) {
        formState.value.resourceType = undefined;
      }
      flag.value = true;
    }
  }
);

watch(
  () => formState.value.resourceType,
  async () => {
    if (formState.value.resourceType) {
      if (isEdit.value === false) {
        formState.value.dimension = undefined;
        formState.value.monitoringScope = undefined;
      }
      dimensionOptionList.value = await getDimension({ namespace: formState.value.resourceType });
      flag.value = true;
    } else {
      if (isEdit.value === false) {
        formState.value.dimension = undefined;
        formState.value.monitoringScope = undefined;
      }
      if (formState.value.eventType === 'EVENT.CUSTOM') {
        flag.value = true;
      } else {
        flag.value = false;
      }
    }
  },
  { immediate: true }
);

watch(
  () => formState.value.monitoringScope,
  async () => {
    if (
      formState.value.monitoringScope &&
      formState.value.monitoringScope === 'MULTI_INSTANCE' &&
      formState.value.resourceType
    ) {
      multiple.value = true;
      if (isEdit.value === false) {
        formState.value.resources = undefined;
        formState.value.dimension = undefined;
      }
      dimensionOptionList.value = await getDimension({ namespace: formState.value.resourceType });
      if (isEdit.value === true) {
        isEdit.value = false;
      }
    } else {
      if (isEdit.value === false) {
        formState.value.dimension = undefined;
        formState.value.resources = undefined;
      }
      multiple.value = false;
    }
  },
  { immediate: true }
);

watch(
  () => formState.value.dimension,
  async () => {
    if (formState.value.dimension) {
      if (isEdit.value === false) {
        formState.value.resources = undefined;
      }
      resourceListOptionList.value = await getResourceList({
        namespace: formState.value.resourceType,
        dimension: formState.value.dimension,
      });
    } else {
      if (isEdit.value === false) {
        formState.value.resources = undefined;
      }
    }
  },
  { immediate: true }
);

onMounted(() => {
  formState.value = {};
});

function getFormValue() {
  return formState.value;
}

async function setFormValue(fieldValue: any) {
  isEdit.value = true;
  formState.value = await fieldValue;

  await nextTick(async () => {
    tableRef.value.setTableData(fieldValue.policies, formState.value.eventType, formState.value.resourceType);
  });
}

function handleSubmit() {
  formRef.value.validate().then(() => {
    if (system.value === false) {
      if (formState.value.resourceType === undefined) {
        formState.value.resourceType = '';
      }
    }
    formState.value.policies = tableRef.value.getTableData();
    let params = toRaw(formState);
    emit('submit', params);
  });
}

defineExpose({ handleSubmit, getFormValue, setFormValue });
</script>
